<template>
	<view class="team">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="total">
			<view class="item">
				<view class="label">直推人数</view>
				<view class="value">{{sumary.firstTeam}}</view>
			</view>
			<view class="item">
				<view class="label">间推人数</view>
				<view class="value">{{sumary.scondTeam}}</view>
			</view>
			<view class="item">
				<view class="label">团队总人数</view>
				<view class="value">{{sumary.teamNum}}</view>
			</view>
		</view>

		<view class="card member">
			<u-sticky>
				<view class="filter-bar">
					<view class="filter" @click="visible = true">
						{{ levelName }}
						<u-icon name="arrow-down" size="24"></u-icon>
					</view>
					<u-search :show-action="false" margin="0 0 0 24rpx" v-model="kwd"></u-search>
				</view>
			</u-sticky>

			<view>
				<u-tabs :list="tabs" :current="current" active-color="#ff8404" :is-scroll="false"
					@change="onChange"></u-tabs>
			</view>

			<view class="member-list">
				<view class="member-item" v-for="(item,index) in list" :key="index">
					<u-avatar size="120" :src="$addUrl(item.avatar)"></u-avatar>
					<view class="info">
						<view class="row">
							<view class="col">
								<text class="label">ID：</text>
								<text class="val">{{item.id}}</text>
							</view>
						</view>
						<view class="row">
							<view class="col">
								<text class="label">昵称：</text>
								<text class="val u-line-1">{{item.nickname}}</text>
							</view>
						</view>

						<view class="row">
							<view class="col">
								<text class="label">手机：</text>
								<text class="val">{{item.mobile}}</text>
							</view>
						</view>

						<view class="row">
							<view class="col">
								<text class="label">级别：</text>
								<text class="val">{{item.agent_level_str}}</text>
							</view>
						</view>

						<view class="row">
							<view class="col">
								<text class="label">时间：</text>
								<text class="val">{{item.create_time}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="" v-if="list.length == 0" style="margin-top: 30rpx;text-align: center;">
			<text>暂无数据~</text>
		</view>

		<!-- 筛选等级 -->
		<u-select v-model="visible" :list="levelList" @confirm="chooseHandle"></u-select>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '团队',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isLogin: util.getToken(),
		tabs: [{
				name: '全部'
			},
			{
				name: '直推'
			},
			{
				name: '间推'
			},
		],
		current: 0,

		visible: false,
		levelName: '筛选等级',
		levelList: [],

		agent_level: -1,
		keyword: "",

		isMore: true,
		list: [],
		sumary: {
			firstTeam: 0,
			scondTeam: 0,
			teamNum: 0,
		}
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		getLevel();
		if (isLogin) {
			getDataInfo();
			getList();
		}
	}

	// 代理等级
	function getLevel() {
		request.get("team/agentLevels").then(res => {
			console.log('代理等级', res);
			// state.levelList = res.data;
		});
	}

	function getDataInfo() {
		request.get("team/index").then(res => {
			console.log('团队数据', res);
			// state.sumary = res.data;
		})
	}

	// 获取下级列表
	function getList() {
		if (!state.isMore) {
			util.showTip('没有更多了');
			return;
		}
		let params = {
			type: state.current,
			agent_level: state.agent_level,
			keyword: state.keyword,
			skip: state.list.length,
		};
		request.get("team/getMyTeam").then(res => {
			console.log('团队列表', res);
			// state.sumary = res.data;
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isLogin,
		tabs,
		current,
		visible,
		levelName,
		levelList,
		agent_level,
		keyword,
		isMore,
		list,
		sumary,
	} = toRefs(state);
</script>

<style lang="scss">

</style>